<template>
  <!-- 审核管理组件 -->
  <div>
    <!-- 查看详情-->
    <el-dialog
      :title="detailTitle + '详情'"
      :visible.sync="detailDialog"
      :before-close="handleClose"
      width="40%"
    >
      <el-form
        label-position="right"
        label-width="120px"
        ref="detailForm"
        :model="detailForm"
        style="padding-right: 20px"
      >
        <el-form-item prop="name" label="协议编号">
          <el-input
            v-model="detailForm.name"
            placeholder="请输入协议编号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="customerName" label="客户姓名">
          <el-input
            v-model="detailForm.customerName"
            placeholder="请输入客户姓名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="ownerName" label="现所属人">
          <el-input
            v-model="detailForm.ownerName"
            placeholder="请输入现所属人"
          ></el-input>
        </el-form-item>
        <el-form-item prop="frontCenter" label="前台中心">
          <el-input
            v-model="detailForm.frontCenter"
            placeholder="请输入前台中心"
          ></el-input>
        </el-form-item>
        <el-form-item prop="frontDepartment" label="前台部门">
          <el-input
            v-model="detailForm.frontDepartment"
            placeholder="请输入前台部门"
          ></el-input>
        </el-form-item>
        <el-form-item prop="orgDepartment" label="原操作部门">
          <el-input
            v-model="detailForm.orgDepartment"
            placeholder="请输入原操作部门"
          ></el-input>
        </el-form-item>
        <el-form-item prop="loanType" label="贷款类型">
          <el-select v-model="detailForm.loanType" placeholder="请选择贷款类型">
            <el-option label="房贷" value="A"></el-option>
            <el-option label="信贷" value="B"></el-option>
            <el-option label="顺位" value="C"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="stepStatus" label="流程状态">
          <el-select
            v-model="detailForm.stepStatus"
            placeholder="请选择流程状态"
          >
            <el-option label="已提交" value="Approved"></el-option>
            <el-option label="已拒绝" value="Reject"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="approvalStatus" label="审批状态">
          <el-select
            v-model="detailForm.approvalStatus"
            placeholder="请选择审核状态"
          >
            <el-option label="审核中" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核拒绝" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="reason" label="申请理由">
          <el-input
            v-model="detailForm.reason"
            placeholder="请输入申请理由"
          ></el-input>
        </el-form-item>
        <el-form-item prop="applicationTime" label="申请时间">
          <el-date-picker
            v-model="detailForm.applicationTime"
            type="datetime"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 特殊单类型标题
    detailType: {
      type: Number,
      default: 1,
    },
    // 弹窗状态
    detailDialog: {
      type: Boolean,
      default: false,
    },
    //详情标题
    detailTitle: {
      type: String,
      default: "",
    },
    //详情id
    id: {
      type: String,
      default: "",
    },
    detailData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      detailForm: {},
    };
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
    },
  },
  created() {
    this.detailForm = this.detailData;
  },
};
</script>

<style lang="less" scoped>
/deep/.el-date-editor.el-input {
  width: 100%;
}
/deep/.el-select {
  width: 100%;
}
</style>
